<template>
  <div class="hello">
        <mu-paper class="banner">
          <img src="../assets/logo26.png" class="logo">
          <h1>{{ hotelInfo.hotelName }}</h1>
          <p v-if="!isLogin()">
            <mu-button color="secondary" @click="navigateTo('/login')">
              <b>立即登录</b>
            </mu-button>
            <mu-button @click="navigateTo('/register')">立即注册</mu-button>
          </p>
          <p v-else="isLogin()">
            <mu-button color="secondary" @click="navigateTo('/room')">
            浏览热门客房
            </mu-button>
            <mu-button color="" @click="navigateTo('/order')">查看个人订单</mu-button>
          </p>
        </mu-paper>
  </div>
</template>

<script>
  import colImg from '../assets/banner/banner2.jpg'
  import Cookies from 'js-cookie'
  import {getHotel} from "../api/hotel";

  export default {
  name: 'IndexPage',
  data () {
    return {
      hotelInfo: {
        hotelName: "ho",
        address: ""
      },
      list: [{
        image: colImg,
        title: 'Breakfast',
        author: 'Myron'
      }, {
        image: colImg,
        title: 'Burger',
        author: 'Linyu'
      }, {
        image: colImg,
        title: 'Camera',
        author: 'ruolin'
      }]
    }
  },
  created: function() {
    this.isLogin()
    //对酒店信息进行初始化
    this.fetchData()
  },
  methods:{
    isLogin() {
      // 判断用户是否登录，用于判断导航栏右上角显示 登录按钮还是用户名
      const username = Cookies.get("username");
      return !(username == null || username === '');
    },
    //进行路由跳转
    navigateTo(val) {
      this.$router.push(val);
    },
    fetchData(){
      //获取酒店信息
      getHotel().then(res => {
        this.hotelInfo = res.data[0]
      }).catch(err => {
        console.log(err)
        this.$toast.error(err.toString())
      })
    },

  }
}
</script>

<style scoped>
.logo{
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
  .banner {
    display: flex;
    flex-direction: column;
    background-color: #2B087AB6;
    height: 700px;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
.carousel img{
    width: inherit;
  }
.demo-paper,.hello{
  text-align: center;
}
  .demo-paper img{
    width: 300px;
  }
  .footer{
    text-align: center;
    color: #fff;
    padding: 50px 40px;
    background-color: #2196f3;
  }
.gridlist-inline-demo {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
</style>
